

<!-- 表格 -->
<table id="demo" lay-filter="test">
</table>

<script type="text/html" id="toolbarDemo">

    <div class="layui-btn-fluid">
        <button class="layui-btn layui-btn-warm" lay-event="search"><i class="layui-icon layui-icon-search" ></i>搜索充值记录</button>
        <button class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-addition" ></i>为客户充值</button>
        <button class="layui-btn layui-btn-danger" lay-event="delbat"><i class="layui-icon layui-icon-delete" ></i>删除充值记录</button>
        <button class="layui-btn" lay-event="refresh"><i class="layui-icon layui-icon-refresh" ></i>刷新</button>

    </div>



</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            //,height: 500
            ,toolbar:'#toolbarDemo'
            ,url: '/recharge/page' //数据接口地址：将来一个handler对应的url
            ,page: true
            ,cols:[[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true, width:80}
                ,{field: 'cusId', title: '客户 id', width:120, sort: true, templet:function (d) {
                        return '<label id="cusId'+ d.cusId+'_'+d.id+'" onmouseover="show('+d.cusId+','+d.id+');">' + d.cusId + '</label>';}}
                ,{field: 'createtime', title: '创建订单时间', width:200}
                ,{field: 'updatetime', title: '更新时间', width:200}
                ,{field: 'money', title: '充值金额',sort: true, width:120}
                ,{field: 'state', title: '状态', width:80, sort: true,
                    templet: function(data){
                        return data.state == 1 ? '<span style="color: green;"><i class="layui-icon layui-icon-ok"></i> 正常</span>' : '<span style="color: red;"><i class="layui-icon layui-icon-close"></i> 停用</span>';
                    }
                }
                ,{field: 'paymentType', title: '支付类型', width:120, sort: true,
                    templet: function(data){
                        if(data.paymentType==0){
                            return '<span style="color: green;"><i class="layui-icon layui-icon-rmb"></i> 银联</span>';
                        }else if(data.paymentType==1){
                            return '<span style="color: darkred;"><i class="layui-icon layui-icon-login-wechat"></i> 微信</span>';
                        }else if(data.paymentType==2){
                            return '<span style="color: yellowgreen;"><i class="layui-icon layui-icon-cellphone-fine"></i> 支付宝</span>';
                        }
                    }
                }
                ,{fixed: 'right', title:'操作', align:'center', toolbar: '#barDemo', width:160}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    /////////////////////////////////////////////
                    //弹出增加页面iframe
                    window.PartitionId=data;
                    layer.open({
                        type: 2,
                        content: ['html/rechargeForm.html','no'] ,//加no不允许出现滚动条
                        title:'添加信息',
                        //area: ['500px', '300px'],
                        area: ['50%', '70%'],
                        skin: "layui-layer-molv",
                        btn: ['确定', '关闭'],
                        success: function (layero, index) {    //成功获得加载changefile.html时，预先加载，将值从父窗口传到 子窗口
                            var iframe = window['layui-layer-iframe' + index];//子窗口
                            //父窗口向子窗口传值
                            var form = $(layero).find("iframe").contents().find(".layui-form");//获取子页面元素
                            $(form).find("#normal").attr('checked','checked');
                            $(form).find("#creatTime").hide();
                            $(form).find("#updateTime").hide();
                            //动态加载用户
                            $.ajax({
                                //请求方式
                                type : "GET",
                                //请求的媒体类型
                                contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url : "/customer/list",
                                //数据，json字符串
                                //请求成功
                                success : function(data) {
                                    var body = layer.getChildFrame('body', index);
                                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();比如iframeWin.alert11();
                                    //console.log(body.html()) //得到iframe页的body内容

                                    var sel=$(body).find("#select_cus");

                                    for (var i = 0; i < data.message.length; i++) {
                                        if(i==0){
                                            $(sel).append('<option value="' + data.message[i].id + '" selected>' + data.message[i].username + '</option>');
                                        }else{
                                            $(sel).append('<option value="' + data.message[i].id + '">' + data.message[i].username + '</option>');
                                        }
                                    }
                                    $(form).find("#unionPay").attr('checked','checked');
                                    iframeWin.refresh();//刷新子页面
                                },
                                //请求失败，包含具体的错误信息
                                error : function(data){
                                    layer.msg(data.message);
                                }
                            });
                        },
                        yes: function(index, layero){
                            var iframe = window['layui-layer-iframe' + index];//子窗口
                            //父窗口向子窗口传值
                            var form = $(layero).find("iframe").contents().find("#form");//获取子页面元素
                            var formdata=form.serializeJSON();
                            //alert(formdata);
                            $.ajax({
                                //请求方式
                                type : "POST",
                                //请求的媒体类型
                                contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url : "/recharge/insert",
                                //数据，json字符串
                                data : JSON.stringify(formdata),
                                //请求成功
                                success : function(data) {
                                    layer.msg(data.message);
                                    //添加后无法解决动态页面更新问题，因为在最后一页
                                    table.reload("demo");
                                },
                                //请求失败，包含具体的错误信息
                                error : function(data){
                                    layer.msg(data.message);
                                }
                            });


                            layui.table.render()
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                        },
                        cancel: function(index, layero){
                            layer.close(index);
                            return false;
                        }
                    },function(index){
                        layer.close(index);

                    });

//////////////////////////
                    break;
                case 'delbat':
                    var data = checkStatus.data;
                    if(checkStatus.data.length==0){
                        layer.msg('您还未选中');
                    }else if(checkStatus.isAll){
                        layer.confirm('你疯了吧？要删所有用户？这可是'+data.length+'个，你确定？', {icon: 3, title:'提示'}, function(index){
                            //do something
                            $.ajax({
                                //请求方式
                                type : "POST",
                                //请求的媒体类型
                                contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url : "/recharge/deleteBatch",
                                //数据，json字符串
                                data : JSON.stringify(data),
                                //请求成功
                                success : function(data) {
                                    layer.msg(data.message);
                                },
                                //请求失败，包含具体的错误信息
                                error : function(data){
                                    layer.msg(data.message);
                                }
                            });

                            layer.close(index);
                        });
                    } else{
                        layer.confirm('确定要删除这'+data.length+'个吗？', {icon: 3, title:'提示'}, function(index){
                            //do something
                            alert(JSON.stringify(data));
                            $.ajax({
                                //请求方式
                                type : "POST",
                                //请求的媒体类型
                                contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url : "/recharge/deleteBatch",
                                //数据，json字符串
                                data : JSON.stringify(data),
                                //请求成功
                                success : function(data) {
                                    table.reload("demo");
                                    layer.msg(data.message);
                                },
                                //请求失败，包含具体的错误信息
                                error : function(data){
                                    layer.msg(data.message);
                                }
                            });
                            layer.close(index);
                        });
                    }

                    //layer.msg('选中了：'+ data.length + ' 个');
                    break;

                //搜索
                case 'search':
                    //弹出搜索页面iframe
                    window.PartitionId=data;
                    layer.open({
                        type: 2,
                        content: ['html/rechargeSearch.html','no'] ,//加no不允许出现滚动条
                        title:'查找数据',
                        //area: ['500px', '300px'],
                        area: ['50%', '60%'],
                        skin: "layui-layer-molv",
                        btn: ['确定', '关闭'],
                        success: function (layero, index) {    //成功获得加载changefile.html时，预先加载，将值从父窗口传到 子窗口
                            var iframe = window['layui-layer-iframe' + index];//子窗口
                            //父窗口向子窗口传值
                            var form = $(layero).find("iframe").contents().find(".layui-form");//获取子页面元素
                            //动态加载用户
                            $.ajax({
                                //请求方式
                                type : "GET",
                                //请求的媒体类型
                                contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url : "/customer/list",
                                //数据，json字符串
                                //请求成功
                                success : function(data) {
                                    var body = layer.getChildFrame('body', index);
                                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();比如iframeWin.alert11();
                                    //console.log(body.html()) //得到iframe页的body内容

                                    var sel=$(body).find("#select_cus");

                                    for (var i = 0; i < data.message.length; i++) {
                                        if(i==0){
                                            $(sel).append('<option value="' + data.message[i].id + '" selected>' + data.message[i].username + '</option>');
                                        }else{
                                            $(sel).append('<option value="' + data.message[i].id + '">' + data.message[i].username + '</option>');
                                        }
                                    }
                                    iframeWin.refresh();//刷新子页面
                                },
                                //请求失败，包含具体的错误信息
                                error : function(data){
                                    layer.msg(data.message);
                                }
                            });
                        },
                        yes: function(index, layero){
                            var iframe = window['layui-layer-iframe' + index];//子窗口
                            //父窗口向子窗口传值
                            var form = $(layero).find("iframe").contents().find("#search-form");//获取子页面元素
                            //使用#id就可以获取到弹出层里面的子元素。前面的写法都是固定的。
                            var formdata=form.serializeJSON();
                            var searchContent=$(layero).find("iframe").contents().find("#select_cus").val();
                            var searchState=$(layero).find("iframe").contents().find("#search-state").val();
                            console.log(JSON.stringify(searchContent));
                            console.log(JSON.stringify(searchState));
                            table.render({
                                elem: '#demo'
                                //,height: 500
                                ,toolbar:'#toolbarDemo'
                                ,url: '/recharge/search' //数据接口地址：将来一个handler对应的url
                                ,page: true
                                ,where: {searchContent: searchContent, searchState: searchState}
                                ,cols:[[ //表头
                                    {type: 'checkbox', fixed: 'left'}
                                    ,{field: 'id', title: 'ID', sort: true, width:80}
                                    ,{field: 'cusId', title: '客户 id', width:120, sort: true, templet:function (d) {
                                            return '<label id="cusId'+ d.cusId+'_'+d.id+'" onmouseover="show('+d.cusId+','+d.id+');">' + d.cusId + '</label>';}}
                                    ,{field: 'createtime', title: '创建订单时间', width:200}
                                    ,{field: 'updatetime', title: '更新时间', width:200}
                                    ,{field: 'money', title: '充值金额',sort: true, width:120}
                                    ,{field: 'state', title: '状态', width:80, sort: true,
                                        templet: function(data){
                                            return data.state == 1 ? '<span style="color: green;"><i class="layui-icon layui-icon-ok"></i> 正常</span>' : '<span style="color: red;"><i class="layui-icon layui-icon-close"></i> 停用</span>';
                                        }
                                    }
                                    ,{field: 'paymentType', title: '支付类型', width:120, sort: true,
                                        templet: function(data){
                                            if(data.paymentType==0){
                                                return '<span style="color: green;"><i class="layui-icon layui-icon-rmb"></i> 银联</span>';
                                            }else if(data.paymentType==1){
                                                return '<span style="color: darkred;"><i class="layui-icon layui-icon-login-wechat"></i> 微信</span>';
                                            }else if(data.paymentType==2){
                                                return '<span style="color: yellowgreen;"><i class="layui-icon layui-icon-cellphone-fine"></i> 支付宝</span>';
                                            }
                                        }
                                    }
                                    ,{fixed: 'right', title:'操作', align:'center', toolbar: '#barDemo', width:160}
                                ]],
                                done: function(res, curr, count){
                                    //如果是异步请求数据方式，res即为你接口返回的信息。
                                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                                    if(count==0){
                                        layer.msg("对不起，没有搜索到");
                                    }else{
                                        layer.msg("搜索到"+count+"条数据");
                                    }
                                    console.log(res);

                                    //得到当前页码
                                    console.log(curr);

                                    //得到数据总量
                                    console.log(count);
                                }
                            });
                            layui.table.render()
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                        },
                        cancel: function(index, layero){
                            layer.close(index);
                            return false;
                        }
                    },function(index){
                        layer.close(index);

                    });



                    break;

                //刷新
                case 'refresh':
                    table.render({
                        elem: '#demo'
                        //,height: 500
                        ,toolbar:'#toolbarDemo'
                        ,url: '/recharge/page' //数据接口地址：将来一个handler对应的url
                        ,page: true
                        ,cols:[[ //表头
                            {type: 'checkbox', fixed: 'left'}
                            ,{field: 'id', title: 'ID', sort: true, width:80}
                            ,{field: 'cusId', title: '客户 id', width:120, sort: true, templet:function (d) {
                                    return '<label id="cusId'+ d.cusId+'_'+d.id+'" onmouseover="show('+d.cusId+','+d.id+');">' + d.cusId + '</label>';}}
                            ,{field: 'createtime', title: '创建订单时间', width:200}
                            ,{field: 'updatetime', title: '更新时间', width:200}
                            ,{field: 'money', title: '充值金额',sort: true, width:120}
                            ,{field: 'state', title: '状态', width:80, sort: true,
                                templet: function(data){
                                    return data.state == 1 ? '<span style="color: green;"><i class="layui-icon layui-icon-ok"></i> 正常</span>' : '<span style="color: red;"><i class="layui-icon layui-icon-close"></i> 停用</span>';
                                }
                            }
                            ,{field: 'paymentType', title: '支付类型', width:120, sort: true,
                                templet: function(data){
                                    if(data.paymentType==0){
                                        return '<span style="color: green;"><i class="layui-icon layui-icon-rmb"></i> 银联</span>';
                                    }else if(data.paymentType==1){
                                        return '<span style="color: darkred;"><i class="layui-icon layui-icon-login-wechat"></i> 微信</span>';
                                    }else if(data.paymentType==2){
                                        return '<span style="color: yellowgreen;"><i class="layui-icon layui-icon-cellphone-fine"></i> 支付宝</span>';
                                    }
                                }
                            }
                            ,{fixed: 'right', title:'操作', align:'center', toolbar: '#barDemo', width:160}
                        ]]
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除ID为'+data.id+'的信息么?', function(index){

                    //向后台发送请求
                    $.post('/recharge/delete', {id:data.id}, function (result) {
                        if(result.status) {
                            //status 为 true时，代表删除成功
                            obj.del();
                            layer.msg("删除成功!" );
                        } else {
                            layer.msg("删除失败!" + result.message);
                        }
                    });

                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                //弹出修改页面iframe
                window.PartitionId=data;
                layer.open({
                    type: 2,
                    content: ['html/rechargeForm.html','no'] ,//加no不允许出现滚动条
                    title:'修改信息',
                    //area: ['500px', '300px'],
                    area: ['50%', '70%'],
                    skin: "layui-layer-molv",
                    btn: ['确定', '关闭'],
                    success: function (layero, index) {    //成功获得加载changefile.html时，预先加载，将值从父窗口传到 子窗口
                        var iframe = window['layui-layer-iframe' + index];//子窗口
                        //父窗口向子窗口传值
                        var form = $(layero).find("iframe").contents().find(".layui-form");//获取子页面元素
                        //使用#id就可以获取到弹出层里面的子元素。前面的写法都是固定的。
                        //form.find(":checkbox").prop("checked", true);
                        //form.find(":input").prop("checked", true);
                        //var username=form.find(".username");
                        //var formdata=form.serializeArray();
                        //alert(formdata);
                        //alert(data.id);
                        //装载修改的原内容
                        $(form).find("[name=id]").attr('value',data.id);
                        $(form).find("[name=cusId]").attr('value',data.cusId);
                        $(form).find("[name=createtime]").attr('value',data.createtime);
                        $(form).find("[name=updatetime]").attr('value',data.updatetime);
                        $(form).find("[name=money]").attr('value',data.money);
                        //$(form).find("[name=paymentType]").attr('value',data.paymentType);

                        //装填用户

                        $.ajax({
                            //请求方式
                            type : "GET",
                            //请求的媒体类型
                            contentType: "application/json;charset=UTF-8",
                            //请求地址
                            url : "/customer/list",
                            //数据，json字符串
                            //请求成功
                            success : function(datum) {
                                var body = layer.getChildFrame('body', index);
                                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();比如iframeWin.alert11();
                                //console.log(body.html()) //得到iframe页的body内容

                                var sel=$(body).find("#select_cus");

                                for (var i = 0; i < datum.message.length; i++) {
                                    if(data.cusId==datum.message[i].id){
                                        $(sel).append('<option value="' + datum.message[i].id + '" selected>' + datum.message[i].username + '</option>');
                                    }else{
                                        $(sel).append('<option value="' + datum.message[i].id + '">' + datum.message[i].username + '</option>');
                                    }
                                }
                                iframeWin.refresh();//刷新子页面
                            },
                            //请求失败，包含具体的错误信息
                            error : function(data){
                                layer.msg(data.message);
                            }
                        });









                        if($.trim(data.state) == 1 ){

                            $(form).find("#normal").attr('checked','checked');
                        }else{
                            $(form).find("#disabled").attr('checked','checked');
                        }
                        if($.trim(data.paymentType)==0){
                            //alert('0');
                            $(form).find("#unionPay").attr('checked','checked');
                        }else if($.trim(data.paymentType)==1){
                            //alert('1');
                            $(form).find("#wechatPay").attr('checked','checked');
                        }else if($.trim(data.paymentType)==2){
                            //alert('2');
                            $(form).find("#aliPay").attr('checked','checked');
                        }


                        iframeWin.refresh();//刷新子页面
                    },
                    yes: function(index, layero){
                        var iframe = window['layui-layer-iframe' + index];//子窗口
                        //父窗口向子窗口传值
                        var form = $(layero).find("iframe").contents().find("#form");//获取子页面元素
                        //使用#id就可以获取到弹出层里面的子元素。前面的写法都是固定的。
                        //form.find(":checkbox").prop("checked", true);
                        //form.find(":input").prop("checked", true);
                        //var username=$(layero).find("iframe").contents().find(".username").val();
                        var formdata=form.serializeJSON();
                        //alert(formdata);
                        $.ajax({
                            //请求方式
                            type : "POST",
                            //请求的媒体类型
                            contentType: "application/json;charset=UTF-8",
                            //请求地址
                            url : "/recharge/update",
                            //数据，json字符串
                            data : JSON.stringify(formdata),
                            //请求成功
                            success : function(data) {
                                layer.msg(data.message);
                                //同步更新缓存对应的值
                                obj.update({
                                    cusId: formdata.cusId,
                                    createtime: formdata.createtime
                                    ,updatetime: formdata.updatetime
                                    ,money: formdata.money
                                    ,paymentType: formdata.paymentType
                                    ,state: formdata.state

                                });
                                layui.table.render()
                            },
                            //请求失败，包含具体的错误信息
                            error : function(data){
                                layer.msg(data.message);
                            }
                        });


                        layui.table.render();
                        table.reload("demo");
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    },
                    cancel: function(index, layero){
                        layer.close(index);
                        return false;
                    }
                },function(index){
                    layer.close(index);

                });




            }
        });

    });
    function show(id,rid) {
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/customer/getById?id="+id,
            //数据，json字符串
            //请求成功
            success : function(data) {
                // var a='cusId'+data.message.cusId;
                // var that = this;
                layer.tips('客户名:'+data.message.username, $('#cusId'+id+'_'+rid),{
                    tips: [1, "#4794ec"]
                }); //在元素的事件回调体中，follow直接赋予this即可
                // layer.tips("客户名", "："+data.message.username+"", {
                //     tips: [4, "#4794ec"]
                // });
            },
            //请求失败，包含具体的错误信息
            error : function(data){
                layer.msg(data.message);
            }
        });

    }

</script>
